/* Spinners */

/* Do not use transition variables here, cause it souldn't ever be removed */

/* Chat messges spinner */

    .small-blue-spinner {
        -webkit-animation: rotate 0.8s infinite linear;
        animation: rotate 0.8s infinite linear;
        border: 2px solid #2ba6de;
        border-left-color: transparent;
        border-radius: 50%;
        border-top: 0;
        box-sizing: border-box;
        height: 12px;
        width: 12px;
    }

/* Initial loading screen, main loader */

    .loading-spinner {
        left: 0;
        position: fixed;
        text-align: center;
        top: 50%;
        width: 100%;
        z-index: 1112;
    }
    body.loading .loading-spinner {
        z-index: 1212;
    }
    .loading-spinner .main-loader,
    .sub-loader {
        background: center / 100% no-repeat url(../images/mega/loader-dark.gif);
        background-color: var(--progress-bar-fill4);
        border-radius: 100%;
        height: 72px;
        left: 50%;
        margin: -36px 0 0 -36px;
        position: absolute;
        top: 0;
        width: 72px;
    }
    .sub-loader {
        position: fixed;
        top: 50%;
    }
    .loading-spinner.init .main-loader {
        height: 0;
        margin: 0;
        -webkit-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        width: 0;
    }
    .loading-spinner.init.active .main-loader {
        height: 72px;
        margin: -36px 0 0 -36px;
        width: 72px;
    }
    .loading-spinner.light .main-loader {
        background-color: var(--text-color-white-higher);
        background-image: url(../images/mega/loader-light.gif);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    }
    .loading-spinner.light.small .main-loader {
        background-image: url(../images/mega/loader-light-small.gif);
        height: 36px;
        width: 36px;
    }
    .loading-spinner.light.small .main-loader::before {
        border-radius: inherit;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
        content: '';
        display: block;
        height: 100%;
    }
    .loading-info {
        color: var(--text-color-high);
        font: var(--text-h1);
        font-family: var(--text-font-family);
        font-weight: 300;
        margin: 0;
        padding: 0;
    }
    .loading-spinner.active .loading-info {
        padding: 101px 0 0 0;
    }
    .loading-info li {
        box-sizing: border-box;
        height: 0;
        list-style-type: none;
        opacity: 0;
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }
    .loading-info li.status-txt {
        font: var(-text-h3);
        font-family: var(--text-font-family);
        font-weight: 300;
        line-height: inherit;
        margin-top: -40px;
        overflow: hidden;
    }
    .loading-info li.loaded,
    .loading-info li.loading {
        height: 50px;
    }
    .loading-info li.loading {
        opacity: 1;
    }
    .loading-info li.loaded:nth-child(2) {
        opacity: 0.5;
    }
    .loading-info li.loaded:nth-child(3) {
        opacity: 0.25;
    }
    .loading-info li.loaded:nth-child(4) {
        opacity: 0.12;
    }
    .loading-info li::after {
        -webkit-animation: rotate 0.8s infinite linear;
        animation: rotate 0.8s infinite linear;
        background: -110px -176px no-repeat url(../loading-sprite_light.png);
        content: '\00a0';
        display: block;
        display: inline-block;
        height: 16px;
        margin: 0 0 0 10px;
        vertical-align: middle;
        width: 16px;
    }
    .mobile .loading-info li::after {
        display: none;
    }
    .loading-info li.loaded::after {
        -webkit-animation: none;
        animation: none;
        background-position: -149px -174px;
    }
    .theme-dark .loading-info li::after {
        background-image: url(../loading-sprite_dark.png);
    }
    .loader-progressbar {
        background-color: var(--progress-bar-fill4);
        bottom: 0;
        height: 12px;
        opacity: 0;
        position: fixed;
        -webkit-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        width: 100%;
    }
    .loader-progressbar.active {
        opacity: 1;
    }
    .loader-percents {
        background-color: var(--progress-bar-fill2);
        border-right: 2px solid var(--progress-bar-fill1);
        box-sizing: border-box;
        height: 12px;
        opacity: 0.7;
        overflow: hidden;
        width: 100%;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }
    .loader-percents.delay-loader {
        transition-duration: 150s;
    }

/* Media viewer pending spinner */

    .bouncing-loader {
        font-size: 0;
        left: 50%;
        line-height: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        z-index: 1000;
    }
    .bouncing-loader > span {
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        background-color: var(--stroke-main-inverted);
        border-radius: 100%;
        display: inline-block;
        height: 16px;
        margin: 0 8px;
        width: 16px;
    }
    .positive .bouncing-loader > span,
    .negative .bouncing-loader > span {
        background-color: var(--text-color-white-high);
    }
    .bouncing-loader > span:nth-child(1) {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    .bouncing-loader > span:nth-child(2) {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
    .bouncing-loader.small > span {
        height: 6px;
        margin: 0 3px;
        width: 6px;
    }

    @-webkit-keyframes sk-bouncedelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
        }
    }

    @keyframes sk-bouncedelay {
        0%,
        80%,
        100% {
            transform: scale(0);
        }
        40% {
            transform: scale(1);
        }
    }


/* Create new folder spinner */

    .fountaing,
    .cr-fountaing {
        height: 12px;
        left: 50%;
        margin: -1px 0 0 -50px;
        position: absolute;
        top: 50%;
        width: 100px;
    }
    .fountaing-circle {
        -webkit-animation-direction: linear;
        -webkit-animation-duration: 1.3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: bounce_fountaing;
        animation-direction: linear;
        animation-duration: 1.3s;
        animation-iteration-count: infinite;
        animation-name: bounce_fountaing;
        background-color: var(--stroke-grey-1-inverted);
        border-radius: 8px;
        height: 7px;
        position: absolute;
        top: 0;
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        width: 7px;
    }
    .cr-fountaing_1 {
        -webkit-animation-delay: 0.52s;
        animation-delay: 0.52s;
        left: 0;
    }
    .cr-fountaing_2 {
        -webkit-animation-delay: 0.65s;
        animation-delay: 0.65s;
        left: 13px;
    }
    .cr-fountaing_3 {
        -webkit-animation-delay: 0.78s;
        animation-delay: 0.78s;
        left: 25px;
    }
    .cr-fountaing_4 {
        -webkit-animation-delay: 0.91s;
        animation-delay: 0.91s;
       left: 38px;
    }
    .cr-fountaing_5 {
        -webkit-animation-delay: 1.04s;
        animation-delay: 1.04s;
        left: 50px;
    }
    .cr-fountaing_6 {
        -webkit-animation-delay: 1.17s;
        animation-delay: 1.17s;
        left: 63px;
    }
    .cr-fountaing_7 {
        -webkit-animation-delay: 1.3s;
        animation-delay: 1.3s;
        left: 75px;
    }
    .cr-fountaing_8 {
        -webkit-animation-delay: 1.43s;
        animation-delay: 1.43s;
        left: 88px;
    }

    @-webkit-keyframes bounce_fountaing {
        0% {
            background-color: var(--stroke-grey-1-inverted);
            -webkit-transform: scale(1);
        }
        100% {
            background-color: var(--stroke-grey-1);
            -webkit-transform: scale(0.3);
        }
    }

    @keyframes bounce_fountaing {
        0% {
            background-color: var(--stroke-grey-1-inverted);
            transform: scale(1);
        }
        100% {
            background-color: var(--stroke-grey-1);
            transform: scale(0.3);
        }
    }

/* Square elements rotation */

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

/* Some onboarding page animation, probably old */

    @-webkit-keyframes downward-arrow {
        0% {
            bottom: 152px;
            opacity: 0.4;
        }
        58% {
            bottom: 120px;
            opacity: 1;
        }
        100% {
            bottom: 152px;
            opacity: 0.4;
        }
    }

    @keyframes downward-arrow {
        0% {
            bottom: 152px;
            opacity: 0.4;
        }
        58% {
            bottom: 120px;
            opacity: 1;
        }
        100% {
            bottom: 152px;
            opacity: 0.4;
        }
    }

/* Bubble-Circle spinner Begin */

    .bubble-circle {
        color: var(--progress-bar-fill1);
        font-size: 14px;
        margin: 100px auto;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -9999em;
        -webkit-animation: load4 1.3s infinite linear;
        animation: load4 1.3s infinite linear;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }

    @-webkit-keyframes load4 {
        0%,
        100% {
            box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
        }
        12.5% {
            box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        25% {
            box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        37.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        50% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        62.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
        }
        75% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
        }
        87.5% {
            box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
        }
    }

    @keyframes load4 {
        0%,
        100% {
            box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
        }
        12.5% {
            box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        25% {
            box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        37.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        50% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
        }
        62.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
        }
        75% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
        }
        87.5% {
            box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
        }
    }

/* Bubble-Circle spinner End */
